<template>
  <div class="table-box">
    <div class="padding: 15px 0px 9px 25px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            检索条件<i class="header-icon el-icon-caret-bottom"></i>
          </template>
          <el-form :inline="true" :model="ecardForms" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="ecardForms.ename" placeholder="张三"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="ecardForms.egender" clearable placeholder="请选择">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="律所">
              <el-select v-model="ecardForms.cid" clearable placeholder="请选择">
                <el-option v-for="(item,index) in categorys" :key="item.id" :label=item.college :value=item.id></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称">
              <el-select v-model="ecardForms.eprofessionalTitle" clearable placeholder="请选择">
                <el-option label="一级律师" value="一级律师"></el-option>
                <el-option label="二级律师" value="二级律师"></el-option>
                <el-option label="三级律师" value="三级律师"></el-option>
                <el-option label="四级律师" value="四级律师"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="float: right;margin-right: 10%">
              <el-button size="small" type="primary" @click="queryFuzzy(ecardForms)" icon="el-icon-search" round>查询</el-button>
              <el-button size="small" type="primary" @click="addecard()" icon="el-icon-plus" round>新增</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-divider></el-divider>
    <el-table
        :data="ecards"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
          width="180"

          align="center">
      </el-table-column>
      <el-table-column
          label="照片"
          width="100"
          align="center">
        <template slot-scope="scope">
          <img :src="scope.row.eimg" style="max-height: 50px"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="ename"
          label="姓名"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column
          prop="egender"
          label="性别"
          width="50"
          align="center">
      </el-table-column>
      <el-table-column
          prop="email"
          label="E-mail"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="eteachOffice"
          label="联系地址"
          width="400"
          align="center">
      </el-table-column>
      <el-table-column
          prop="eprofessionalTitle"
          label="职称"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200"
          align="center">
        <template slot-scope="scope" >
          <el-button @click="updatecard(scope.row.id)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="deletecard(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size='5'
          layout="total, prev, pager, next"
          :total=total
          style="display: flex;justify-content: flex-end;margin-top: 30px;margin-right: 10%"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {queryvcardbycid, querycategory, queryFuzzyecards,deleteCard} from "@/api/vcard";

export default {
  inject: ['reload'],
  name: "CardManage",
  data() {
    return {
      total: null,
      categorys: [],
      ecards:[],
      isflag: false,
      ecardForms:{},
    };
  },
  created() {
 /*   querycategory().then((res) => {
      console.log(res);
      this.categorys = res.result
    })*/
    this.categorys=JSON.parse(sessionStorage.getItem("categorys"))
    this.getcardData(1)
  },
  methods: {
    updatecard(eid) {
      this.$router.push({
        name: 'editCard',
        query: {
          eid: eid,
        }
      });
    },

    addecard() {
      this.$router.push({
        name: 'editCard',
      });
    },
    deletecard(eid) {
      deleteCard(eid).then(res => {
        if (res.success) {
          // console.log(response.message);
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          });
          this.reload()
        } else {
          this.$notify({
            title: '失败',
            message: res.message,
            type: 'error'
          });
        }
      })
    },
    getcardData(current) {
      queryvcardbycid("-1", current, 5).then(response => {
        console.log(response.result.records);
        this.ecards = response.result.records
        this.total = response.result.total
      })
    },
    queryFuzzy(ecardForms) {
      queryFuzzyecards(ecardForms, 1, 5).then(response => {
        console.log(ecardForms);
        this.ecards = response.result.records,
            this.total = response.result.total,
            this.isflag = true
      })
    },
    handleCurrentChange(current) {
      if (this.isflag) {
        queryFuzzyecards(this.ecardForms, current, 5).then(response => {
          this.ecards = response.result.records,
              this.total = response.result.total,
              this.isflag = true
        })
      } else {
        this.getcardData(current)
      }
    },
  }
}
</script>

<style scoped>

</style>